<template>
    <el-dialog
            title=""
            :visible.sync="visible"
            width="60%"
            center
            :close-on-click-modal="false"
    >
        <div class="FormsDiv">
            <el-form :model="labelsFrom" :rules="ruleLabels" ref="labelsFrom" label-width="120px" class="demo-ruleForm">
                <el-form-item label="标签名称" prop="label_name">
                    <el-input v-model="labelsFrom.label_name" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="功能描述" prop="label_description">
                    <el-input  type="textarea"  v-model="labelsFrom.label_description"  placeholder="请输入描述" maxlength="255" show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="labelsFrom.is_delete" :label="0" border>激活</el-radio>
                    <el-radio v-model="labelsFrom.is_delete" :label="1" border>禁用</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('labelsFrom')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>



</template>

<script>
    import {getLabelNameRule} from "@/utils/validateFrom";
    import { labelsSave } from "@/api/api";

    export default {
        props:{
            visibleChild: {
                type:Boolean,
                default:false
            },
            childFrom:{
                type:Object,
                default(){
                    return {
                        label_id:-1,
                        label_name:'',
                        label_description:'',
                        is_delete:0
                    };
                }
            },
            labelId:{
                type:Number,
                default() {
                    return -1;
                }
            }
        },
        data(){
            return {
                labelsFrom:JSON.parse(JSON.stringify(this.childFrom)),
                label_id:this.labelId,
                ruleLabels:{
                    label_name: [{ validator: getLabelNameRule,min:4,max:16,required: true,trigger: 'blur',labelId:this.label_id}],
                    label_description: [{required: true,trigger: 'blur',message:'描述必填'}],
                },
            }
        },
        watch:{
            // 这样才能算得上动态监控,不然初始渲染的就会一直保留
            childFrom:{
                // 监听数据发生变化的处理函数
                handler(newValue) {
                  console.log("JSON.parse(JSON.stringify(newValue)",JSON.parse(JSON.stringify(newValue)));
                    this.labelsFrom = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
                },
                // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
                deep: true
            },
            labelId:{
                // 监听数据发生变化的处理函数
                handler(newValue) {
                    this.label_id = newValue;
                    this.ruleLabels.label_name["0"].labelId = newValue;
                    console.log(" this.ruleLabels", this.ruleLabels);
                },
                // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
                deep: true
            },
        },
        computed:{
            visible:{
                get(){
                    return this.visibleChild;
                },
                set(newValue){
                    this.$emit("update:visibleChild",newValue);
                }
            }
        },
        methods: {
            submitForm(){
                this.$refs.labelsFrom.validate((validate)=>{
                    if (validate){
                        labelsSave(this.labelsFrom).then((res) =>{
                            if (res.code === 200){
                                // 重置初始界面
                                this.labelsFrom = {
                                    label_id : -1,
                                    label_name:'',
                                    label_description:'',
                                    is_delete:0
                                };
                                this.$parent.labels([],this.$parent.queryInfo.page,this.$parent.queryInfo.pageSize);
                                this.$message.success('保存成功');
                            }
                        }).catch(error =>{
                            this.$message.error(error.message || 'Error');
                        })
                    }else {
                        this.$message.error('错误');
                    }
                })
                //关闭弹窗
                this.visible = false;
            },
        }
    }
</script>

